<template>
    <div class="order-detail">
        <van-nav-bar title="确认订单" left-arrow @click-left="backUp"></van-nav-bar>
        <section class="contact" v-if="levelInfo.isShipping==1">
            <van-icon name="location"></van-icon>
            <div class="contact-info">
                <div v-if="address" @click="goto('addresslist')">
                    <p>
                        <span class="contact-name">{{address.name}}</span>
                        <span class="contact-tel">{{address.telephone}}</span>
                    </p>
                    <p class="contact-address">{{address.address}}</p>
                </div>
                <div v-if="!address" @click="goto('addressadd')">
                    <p>
                        <span class="contact-name">请添加地址</span>
                    </p>
                </div>
            </div>
        </section>
        <div class="cart-goods-item">
            <div class="pd-info">
                <div class="pd-title">{{levelName}}</div>
                <div class="pd-price">
                    <div class="total">
                        <span>&yen;</span>
                        {{price}}
                    </div>
                    <span class="num">×1</span>
                </div>
            </div>
        </div>
        <div class="order-fee">
            <p>总计:</p>
            <span>￥{{price}}</span>
        </div>
        <div class="btns">
            <van-button type="warning" size="large" @click="onShow">提交订单</van-button>
        </div>
        <div class="ChosePay" v-show="isShow">
            <div class="ChoseBtn">
                <button class="Offline" @click="orderCreat(1)">线下支付</button>
                <button class="Online" @click="orderCreat(2)">线上支付</button>
            </div>
        </div>
    </div>
</template>
<script>
    import {SubmitBar, Toast, Button} from "vant";
    import api from "@/utils/restful";
    import axios from "axios";

    export default {
        name: "vipconfirm",
        components: {
            [SubmitBar.name]: SubmitBar,
            [Toast.name]: Toast,
            [Button.name]: Button,
        },
        data() {
            return {
                address: {},
                good: {},
                levelInfo: {},
                memberInfo: {},
                price: 0,
                levelName: "",
                orderInfo: {},
                payAmount: 1,
                wx: null,
                isShow: false,
                paymentType: '',
            };
        },
        created() {

        },
        mounted() {
            this.levelInfo = JSON.parse(this.$route.query.levelInfo);
            console.log(this.levelInfo)
            this.getMemberInfo();
            this.getAddress();
        },
        methods: {
            onShow () {
                if (this.levelInfo.isShipping) {
                    if (!this.address && this.levelInfo.isShipping == 1){
                        this.isShow = true;
                        Toast("请选择收货地址");
                        return;
                    }
                };
                this.isShow = true;
            },
            orderCreat(value) {
                this.paymentType = value
                this.$axios({
                    method: "post",
                    url: api.conventionOrderCreate,
                    params: {
                        token: localStorage.getItem("token"),
                        orderType: 1,
                        levelId: this.levelInfo.levelId,
                        shippingId: this.address ? this.address.id : '',
                        entrance: 1,
                        paymentType: this.paymentType,
                    }
                }).then(res => {
                    if (res) {
                        if(this.paymentType == 1) {
                            this.$router.push({
                                name: 'levelorder'
                            });
                        };
                        if(this.paymentType == 2) {
                            this.$toast(res.msg);
                            this.orderInfo.orderNo = res.data.orderNo;
                            this.orderInfo.paymentPrice = res.data.paymentPrice;
                            this.orderInfo.returnUrl = "levelorder";
                            this.$router.push({
                                name: "OnlinePay",
                                params: {orderInfo: this.orderInfo}
                            });
                        }
                    }

                });
            },

            getAddress() {
                this.$axios({
                    method: "get",
                    url: api.defaultShipping,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    if (res) {
                        this.address = res.data;
                        console.log(this.address)
                    }
                });
            },
            goto(name) {
                if (name == "addresslist") {
                    this.$router.push({name: name, query: {type: 1}});
                } else {
                    this.$router.push({name: name});
                }
            },
            getMemberInfo() {

                this.$axios({
                    method: "get",
                    url: api.memberInfo,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    if (res) {
                        this.memberInfo = res.data;
                        this.price = this.levelInfo.price;
                        this.levelName = this.levelInfo.name;
                    }
                })
            },
            backUp() {
                this.$router.go(-1);
            },
        }
    };
</script>
<style lang="less" scoped>
    @import "~style/common.less";

    .order-detail {
        .flexbox(flex-start, space-between, column, wrap);
        min-height: 100vh;
        background-color: @borderColor;

        .contact {
            margin-bottom: 10px;
            margin-top: 1px;
            position: relative;
            height: 80px;
            padding: 0 15px;
            display: flex;
            align-items: center;
            background-color: #fff;
            z-index: 999 l;

            &::after {
                .underline();
            }

            .van-icon-location {
                color: @secColor;
                .font-dpr(24px);
                margin-right: 15px;
            }

            .contact-info {
                background-color: #fff;
                flex: 1;
                .font-dpr(14px);
                font-weight: 300;
                color: @fontColorP;

                .contact-name {
                    .font-dpr(15px);
                    font-weight: normal;
                    margin-right: 20px;
                    font-weight: 600;
                }

                .contact-address {
                    .font-dpr(12px);
                    .textoverflow();
                }
            }
        }

        .cart-goods-item {
            background-color: #fff;
            padding: 10px 15px;
            // .flexbox(flex-start, center, row, nowrap);
            // justify-content: space-between;
            &:last-child {
                border-bottom: none;
            }

            .order-info {
                border: 1px solid red;
                position: relative;
                margin-top: 10px;
                padding: 17px 25px;
                color: @fontColorH3;
                .font-dpr(14px);
                font-weight: normal;
                background-color: #fff;

                &::after {
                    position: absolute;
                    content: "";
                    display: block;
                    width: 3px;
                    height: 14px;
                    left: 15px;
                    top: 21px;
                    background-color: @priColor;
                }

                p {
                    .font-dpr(12px);
                    color: @fontColorP;
                    font-weight: 300;
                    margin-top: 12px;
                }
            }

            .pd-images {
                border: 1px solid @borderColor;
                // border: 1px solid #f0f;

                margin: 0 15px 0 5px;
                flex: 1;
                // max-width: 100px;
                img {
                    width: 90px;
                    height: 60px;
                }
            }

            .pd-info {
                flex: 3;
                // .flexbox(flex-start, space-between, column, wrap);
                -width: 68% !important;
                // flex: initial;
                // border: 1px solid blue;

                .pd-title {
                    position: relative;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: -webkit-box;
                    /* autoprefixer: off */
                    -webkit-box-orient: vertical;
                    /* autoprefixer: on */
                    -webkit-line-clamp: 2;

                    max-width: 100%;
                    .font-dpr(12px);
                    color: @fontColorH3;
                }

                .pd-sku {
                    padding: 5px 0;
                    line-height: 1.5;
                    .font-dpr(11px);
                    color: @tipColor;
                }

                .pd-price {
                    margin-top: 10px;

                    .total {
                        .font-dpr(14px);
                        color: @secColor;
                    }

                    .flexbox(space-between, center, row, nowrap);
                    flex: initial;

                    /deep/ .van-stepper {
                        // z-index: 999;
                        .flexbox(space-between, center, row, nowrap);
                        flex: initial;
                        border-radius: 2px;
                        // border: 1px solid #f0f;
                        max-height: 16px;
                        width: 2rem;

                        .van-stepper__minus,
                        .van-stepper__plus {
                            border: none;
                            max-height: 16px;
                            background-color: @bgColor;
                        }

                        .van-stepper__input {
                            border: 1px solid @borderColor;
                            // border: 1px solid #f00;
                            max-height: 16px;
                            background-color: @bgColor;
                            // border: none;
                            outline: none;
                            text-align: center;
                            padding: 0;
                            min-width: 40%;
                            .font-dpr(11px);
                        }

                        .van-stepper__minus--disabled {
                            background-color: @bgColor;
                        }
                    }
                }

                .num {
                    .font-dpr(12px);
                }
            }

            .van-checkbox {
                // border: 1px solid @fontColorH3;
                position: absolute;
                left: 0;
            }
        }

        .order-fee {
            // border: 1px solid red;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            padding: 0 15px;
            .font-dpr(14px);
            line-height: 46px;
            margin: 2px 0;
        }

        .btns {
            padding: 100px 20px;
        }
        .ChosePay {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;
            padding: calc(16rem/37.5);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 10;
            box-sizing: border-box;
        }
        .ChoseBtn {
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            padding: calc(16rem/37.5);
        }
        .ChoseBtn > .Offline , .Online {
            width: 5rem;
            padding: calc(10rem/37.5);
            margin: calc(10rem/37.5);
            border: none;
            outline: none;
            font-size: calc(20rem/37.5);
            background-color: #fbaf13;
            border-radius: calc(5rem/37.5);
        }
    }
</style>